<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标悬浮在datagrid上，显示Tooltip</title>
    <!-- TopJUI框架样式 -->
    <link type="text/css" href="./lib/font-awesome/css/font-awesome.css" rel="stylesheet">
    <link type="text/css" href="./lib/topjui/themes/default/topjui.core.min.css" rel="stylesheet">
    <link type="text/css"  href="./lib/topjui/themes/default/topjui.smartness-blue.css" rel="stylesheet" id="dynamicTheme"/>

    <style>

        html, body {
            height: 100%;
        }
        .tooltip {
            position: absolute;
            display: none;
        }

        .tooltip-content {
            max-height: 400px;
            overflow: auto;
        }

        .tooltip-table {
            border: 1px solid #ccc;
            border-collapse: collapse;
            background-color: darkblue;
            color: white;
        }

        .tooltip-table td{
            padding: 10px;
            text-align: left;
            
        }

        .tooltip-table th{
            padding: 10px;
            text-align: right;
        }
    </style>

    <script type="text/javascript" src="./lib/jquery.min.js"></script>
    <script type="text/javascript" src="./lib/jquery.cookie.js"></script>
    <script type="text/javascript" src="./lib/topjui.config.js"></script>

    <!-- TopJUI框架核心 -->
    <script type="text/javascript" src="./lib/topjui.js"></script>
    <script src="./node_modules/mockjs/dist/mock.js"></script>
    <script src="mockdata.js"></script>
    <script src="test2.js"></script>
    
</head>
<body>
    
    <div id="app" data-toggle="topjui-layout" data-options="fit:true" style="height: 100%;">
        <div data-options="region:'center',title:'主表',fit:false,split:true,border:false,bodyCls:'border_right_bottom'">
             <!-- datagrid表格 -->
             <table id="tt" data-toggle="topjui-edatagrid" data-options="
                url: 'lapi/feed', onClickRow: onClickRow
                " style="width:600px;height:200px" title="Editable DataGrid" singleselect="true">

                <thead>
                    <tr>
                        <th field="_index" data-options=" formatter: function(value, row, index) {var that = this;return index + 1}"></th>
                        <th field="drawNo" width="150" editor="text">图纸号</th>
                        <th field="drawEdition" width="150" editor="text">图纸版本</th>
                        <th field="atlasNo" width="150" editor="text">图册号</th>
                        <th field="atlasType" width="150" editor="text">图纸类型</th>
                        <th field="atlasState" width="150" editor="text">图纸状态</th>
                        <th field="isPreMake" width="150" editor="text">是否预制</th>
                        <th field="materialType" width="150" editor="text">材质类型</th>
                        <th field="pipeLineNo" width="150" editor="text">管线号</th>
                        <th field="mainPipeSpec" width="150" editor="text">主管规格</th>
                        <th field="roomNo" width="150" editor="text">房间号</th>
                        <th field="contractNo" width="150" editor="text">合同号</th>
                        <th field="contractName" width="150" editor="text">合同名称</th>
                        <th field="fileNo" width="150" editor="text">文件编码</th>
                        <th field="layoutNo" width="150" editor="text">布置图号</th>
                        <th field="layoutNo2" width="150" editor="text">布置图号</th>
                        <th field="layoutNo4" width="150" editor="text">布置图号</th>
                    </tr>
                </thead>
            </table>
        </div>
        
    </div>
    

</body>
</html>